<template>
    <div class="container" v-for="member in membershipList">
        <div v-if="member.showIdentity"  class="identity">
                {{ member.identity }}
        </div>
        <el-card class="card">
            
            <div class="card-container">
                <div class="card-img">
                    <el-image class="el-images" :src="member.img" fit="cover" />
                </div>
                <div class="card-content">
                    <div class="name">{{ member.name }}</div>
                    <div v-if="member.description"  class="description">
                        <div class="attribute" >Introduction:</div> {{ member.description }}
                    </div>
                    <div v-if="member.email" class="email">
                        <div class="attribute" >E-mail:</div> {{ member.email }}
                    </div>
                    <div class="address">
                        <div class="attribute">Address:</div>{{ member.address }}
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
    import { type MemberInterface } from "@/types"
    import { membershipList } from "./dataSource";
    import { ref } from "vue";

    let isMobile = ref(window.innerWidth <= 768)


</script>

<style lang="scss" scoped>
    .container {
        margin: 30px 0;
    }
    
    .card {
        margin: 20px 0;

        .card-img {
            width: 20%;
            margin-right: 20px;
        }
    }
    .card-container {
        display: flex;
    }

    .card-content {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .name {
        font-size: 1.75rem;
        color: #0085A1;
    }

    .description {
        width: 100%;
        font-family: Arial, sans-serif;
        line-height: 1.5;
        display: inline;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .email {
        display: flex;
        margin: 10px 0;
        font-family: Arial, sans-serif;

    }

    .address {
        display: flex;
        font-family: Arial, sans-serif;
    }

    .identity {
        font-size: 2rem;
        font-family: Arial, sans-serif;
    }

    .attribute {
        font-weight: bold; 
        font-family: Arial, sans-serif;
        color: #0085A1; 
        margin-right: 10px;
        float: left;
    }

    @media screen and (max-width: 768px) {
        .container {
            width: 100%;
            margin: 20px;
        }

        .card {
            margin: 20px 0;

            .card-container {
                width: 100%;
                display: flex;
                flex-direction: column;
                .card-img {
                    width: 65%;
                    margin-left: 10px;
                }

                .card-content {
                    .name {
                        width: 100%;
                        margin: auto;
                    }
                }
            }

        }
    }
</style>